<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无缝滚动</title>
	<style type="text/css">
		body,ul,li{margin:0;padding:0}
		ul{list-style:none;}
		.slide{
			width:500px;
			height:100px;
			border:1px solid #ddd;
			margin:20px auto 0;
			position:relative;
			overflow:hidden;
		}

		.slide ul{
			position:absolute;
			width:1000px; /*存储10个li,是slide的两倍*/
			height:100px;
			left:0;
			top:0;
		}

		.slide ul li{
			width:90px;
			height:90px;
			margin:5px;
			background-color:#ccc;
			line-height:90px;
			text-align: center;
			font-size:30px;
			float:left; 
		}

		.btns{
			width:500px;
			height:50px;
			margin:10px auto 0;
		}

	</style>
	<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			
			var $ul = $('#slide ul');
			var left = 0;
			var deraction = 2;

			// 加塞li
			$ul.html($ul.html()+$ul.html());

			var timer  = setInterval(move,30);


			function move(){

				left-=deraction;

				if(left<-500){
					
					left = 0;
				}

				if(left>0){

					left=-500;
				}
				$ul.css({left:left});
			}


			$('#btn1').click(function(){
				deraction = 2;
			});

			$('#btn2').click(function(){
				deraction = -2;
			})


			$('#slide').mouseover(function(){
				clearInterval(timer);				
			})

			$('#slide').mouseout(function(){
				timer = setInterval(move,30);			
			})

		})



	</script>


</head>
<body>
	<div class="btns">
		<input type="button" name="" value="向左" id="btn1">
		<input type="button" name="" value="向右" id="btn2">

	</div>
	<div class="slide" id="slide">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>			
		</ul>
	</div>
</body>
</html>